<template>
  <div class="header-main-box w-full h-[64px] box-border p-[20px] pl-[24px] pr-[24px] overflow-hidden ">
    <a-row>
      <a-col :span="4" class="flex justify-start items-center">
        <a-link v-if="route.meta.isCanback" @click="toBack(route.meta)">
          <template #icon>
            <icon-left style="color: #394D73;" />
          </template>
        </a-link>
        <span class="page-title-box" :style="{fontSize: `${ route.meta.isTopLevel ? 20 : 16}px`}">
          {{ props.forceTitle ? props.forceTitle : route.meta.title }}
        </span>
      </a-col>
      <a-col :span="16">
        <slot name="middle"></slot>
      </a-col>
      <a-col :span="4"></a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import { watch, ref, onMounted, nextTick } from 'vue';
import type { PropType } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const props = defineProps({
  forceTitle: {
    type: String,
    default: ''
  },
  beforeBack: {
    type: Function,
    default: () => {
      return true
    }
  }
})
const route = useRoute();
const router = useRouter();

function toBack(meta: any) {
  if (props.beforeBack && !props.beforeBack()) return
  const { backName } = meta
  // console.log(`[ backName ]=>`, backName)
  if (!backName) {
    console.error('返回的路由未定义! ')
    router.push('/')
    return
  }
  router.push({
    name: backName
  })
}

onMounted(() => {
  // console.log(`[ route ]=>`, route)
})
</script>

<style lang="less" scoped>
.header-main-box{
  border-bottom: 1px solid #EBF0FA;
}
.page-title-box{
  font-family: Microsoft YaHei; font-size: 16px; font-weight: bold; color: #394D73;
}
</style>
